<template>
  <div class="border rounded-10px w-50px center~ text-xs" :class="[statusStyle]">{{ status }}</div>
</template>

<script setup lang="ts">
import {toRefs} from "vue";

interface Props {
  status: string
}

const STATUS_TYPE = {
  TODO: "规划中",
  DOING: "进行中",
  DONE: "已完成"
}

const rawProps = defineProps<Props>()
const {status} = toRefs(rawProps)

const statusStyle = computed(() => {
  return status.value === STATUS_TYPE.TODO ?
      "border-green-600 text-green-600" :
      status.value === STATUS_TYPE.DOING ?
          "border-red-600 text-red-600" :
          "border-yellow-600 text-yellow-600"
})
</script>

<style scoped>

</style>